<!--Draw_money提现-->
<template>
  <div class='draw'>
    <div class="draw-header">
      <mt-header title="提现">
        <router-link to="/account" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>
    <div class="draw-content">
      <div class="bank-card backgrounds" v-show="show">
       <div><span>{{username}}</span><span>{{bankname}}</span></div>
       <div> <p>{{banknumber}}</p></div>
      </div>
      <div  v-show="show">
        <div class="tixian backgrounds"><button>提现</button></div>
        <div class="jiebang " @click='del'><button>解绑</button></div>
      </div>
      <div class="icon backgrounds"v-show="!show">
          <router-link to="/addcode" tag="div" class="iocn1"><i class="iconfont icon-jia"></i>
          <p>请绑定银行卡</p>
          </router-link>
      </div>
      <div class="title">
        <p>温馨提示</p>
        <p>绑定后可用使用该卡进行提现；</p>
        <p>若有疑问，请拨打客服热线：15914860780</p>
      </div>
    </div>
  </div>
</template>
<script typy="text/ecmascript-6">
export default {
    data () {
        return {
          username:'李小波',
          bankname:'兴业银行',
          banknumber:'622848156858565585695',
          show:true
        }
    },
  methods:{
            del (){
              const that = this;
              that.username = '';
              that.bankname = '';
              that.banknumber = '';
              that.show = false;
            }
  }
}
</script>
<style  lang="less" rel="stylesheet/less">
  @import "../../lib/less/variable";
  .draw{
    .draw-header{
      header{
        background: #fff;
        color: #666;
      }
    }
    .draw-content{
      .padding(15,15);
      box-sizing: border-box;
      background: #fff;

      .bank-card{
        width: 100%;
        .h(150);
        border-radius: 5px;
        div{
          .fs(20);
          color: #fff;
          span:last-child{
            .ml(10);
          }
        }
        div:first-child{
            .ml(20);
            .pt(30);
        }
        div:last-child{
          .fs(25);
          justify-content: center; /*子元素水平居中*/
          align-items: center; /*子元素垂直居中*/
          display: -webkit-flex;
        }
      }

      button{
        width: 100%;
        height: 100%;
        border: none;
        background: none;
        color: #fff;
      }
      .tixian,.jiebang{
        width: 100%;
        .h(35);
        .lh(32);
        border-radius: 10px;
        .mt(10);
        .fs(16);

      }
      .jiebang{
        border: 1px solid #ccc;
        button{
          color: #666;
        }
      }
      .title{
        p{
          .mt(5);
          .fs(14)
        }
      }
    }
    .icon{
      width: 100%;
      .h(150);
      border-radius: 5px;
      .iocn1{
        text-align: center;
        i{
          .fs(60);
          color: #ccc;
          .pt(10);
          display: inline-block;
          box-sizing: border-box;
          position: relative;
          .top(8);
        }
        p{
          color: #fff;
          .fs(14);
          .mt(10);
        }
      }
    }
  }
</style>
